<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
    <style>
        .fileBtn {
            position:relative;
        }
        .fileBtn #uploadFile {
            width: 120px;
            height: 30px;
            filter: Alpha(opacity=0);
            -moz-opacity:0;
            opacity: 0;
            position: absolute;
            z-index: 2;
        }
        .fileBtn .btn-flie {
            width: 120px;
            height: 30px;
            /* cursor: pointer */
            position: absolute; 
            z-index: 1;
        }
        .info-item {
            margin-top: 35px;
        }
    </style>
    <!-- <script src="http://static.runoob.com/assets/react/react-17.0.2/build/react.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
    <!-- <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/cjs/react-dom.development.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/cjs/react-dom-server.browser.production.min.js"></script>
    <!-- <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> -->
    <!-- <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
    <!-- <script src="http://static.runoob.com/assets/react/browser.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.0.2/antd.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.0.2/antd.js"></script>
</head>
<body>
    <div id="root"></div>
    <!-- <div class="fileBtn" >
        <input type="file" id="uploadFile" multiple>
        <button type="button" class="btn btn-primary btn-sm btn-flie">上传附件</button>
    </div>
    <div class="info-item" id="fileList"></div> -->
    <script type="text/babel">
        
        const App = React.createElement(() => {
            // class App extends React.Component {
            //     state = {
            //         fileItem: []
            //     }
            //     render() {
            //         return (
            //             <antd.Upload>
            //                 <antd.Button icon={<antd.UploadOutlined />}>上传附件</antd.Button>
            //             </antd.Upload>
            //         )
            //     }
            // }
            return (
                <antd.Upload>
                    <antd.Button icon={<antd.UploadOutlined />}>上传附件</antd.Button>
                </antd.Upload>
            )
        })
        ReactDom.render(<App />, document.getElementById("root"));
    </script>
    <!-- <script>
        $(document).ready(function(){
            const fileList = []; // 文件list
            // 请求地址
            const url = 'http://www.test.com/index/uploadFile';

            $('#uploadFile').change(function(){
                const fileItem = $('#uploadFile')[0].files
                console.log($('#uploadFile')[0].files)
                const formData = new FormData();
                // 请求参数
                formData.append('ebook', fileItem);
                $.ajax ({
                    type : "post",
                    url : url,
                    data : formData,
                    async : true,
                    cache : false,
                    contentType : false,
                    processData : false,
                    dataType : 'json',
                    success : function (res) {
                        console.log(res, '获取结果')
                        if (res.code === 200){
                            const dataInfo = res.data
                            if(dataInfo) { 
                                fileList.push(dataInfo)
                                showFile()
                            }
                        } else{
                            alert(res.msg);
                        }
                    }
                });
            });
            function showFile() {
                const fileItem = fileList;
                if(fileItem.length){
                    let str = ''
                    for(let i = 0; i < fileItem.length; i++){
                        str += '<div class="files-info"><p>';
                        str +=  fileItem[i].name
                        str += '</p>'
                        /*str += '<p class="fileIcon checkIcon"><img src="images/check.png" alt=""></p>'
                        str += '<p class="fileIcon down"><img src="images/down.png" alt=""></p>'*/
                        str += '<p class="fileIcon delete"><img src="images/del.png" alt="" onclick=delFileItem('
                        str += `\'`;
                        str += i;
                        str += `\'`;
                        str += ')></p>';
                        str += '</div>';
                    }
                    $('#fileList').html(str)
                } else {
                    $('#fileList').remove()
                }
            }
            function delFileItem(i){
                fileList.splice(i, 1)
                showFile()
            }
        })
    </script> -->
</body>
</html>